<form [formGroup]="filters">
    <table class="uk-table uk-table-responsive uk-table-divider uk-table-hover uk-table-small uk-table-striped">
        <thead>
            <tr>
                <th class="uk-text-center@m">
                    <app-order [order]="grid.parameters.order" property="Id" text="Id" (changed)="load()"></app-order>
                    <app-input-text class="uk-text-center" formControlName="id" text="Id"></app-input-text>
                </th>
                <th>
                    <app-order [order]="grid.parameters.order" property="Forename" text="Forename" (changed)="load()"></app-order>
                    <app-input-text formControlName="forename" text="Forename"></app-input-text>
                </th>
                <th>
                    <app-order [order]="grid.parameters.order" property="Email" text="Email" (changed)="load()"></app-order>
                    <app-input-text formControlName="email" text="Email"></app-input-text>
                </th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let item of grid.list">
                <td class="uk-text-center@m">{{ item?.id }}</td>
                <td>{{ item?.forename }}</td>
                <td>{{ item?.email }}</td>
            </tr>
        </tbody>
    </table>
</form>

<app-pagination [page]="grid.parameters.page" [count]="this.grid.count" (changed)="load()"></app-pagination>
